<!-- word预览 -->
<template>
  <div class="word-preview-wp">
  	<div class="word-group">
  		<div class="word-content" id="wordPreviewContent">
  			<template v-for="(aItem, aIndex) in _d.list">
					<groupHDetail v-if="aItem.type == 'h'" :data="aItem" @change="changeValue($event, aIndex)"/>
					<groupTableDetail v-else-if="aItem.type == 'table'" :data="aItem" @change="changeTableData($event,aIndex)"></groupTableDetail>
					<groupLineDetail v-else-if="aItem.type == 'line'" :data="aItem" :index="aIndex">
						<template v-if="aItem.children">
							<template v-for="(bItem, bIndex) in aItem.children">
  							<groupTextDetail v-if="bItem.type == 'text'" :data="bItem" @change="changeValue($event, aIndex, bIndex)"></groupTextDetail>
  							<groupInputDetail v-else-if="bItem.type == 'input'" :data="bItem" @change="changeValue($event, aIndex, bIndex)"></groupInputDetail>
  						</template>
						</template>
					</groupLineDetail>
				</template>
  		</div>
  		<div class="sub-box">
	  		<el-button type="primary" @click="uploadWord()">导出</el-button>
	  		<el-button type="primary" @click="saveWord()">保存</el-button>
	  	</div>
  	</div>
  	<div class="preview-hidden-box" ref="hiddenBoxRef"></div>
  </div>
  
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {useRoute} from "vue-router";
	import groupHDetail from "../edit/modules/group-h-detail.vue";
	import groupLineDetail from "../edit/modules/group-line-detail.vue";
	import groupTextDetail from "../edit/modules/group-text-detail.vue";
	import groupInputDetail from "../edit/modules/group-input-detail.vue";
	import groupTableDetail from "../edit/modules/group-table-detail.vue";
	import {ImportFile} from "/@/utils/Tools.js";
	import "/@/utils/wordexport/FileSaver.js";
	import "/@/utils/wordexport/jquery.js";
	import "/@/utils/wordexport/jquery.wordexport.js";
	import {creatFragment} from "../edit/components.js";

	const route = useRoute();
	const hiddenBoxRef = ref();

	const _d = reactive({
		list: [],
	})
	
	onMounted(() => {
		ImportFile('/FileTemplate/采购项目合同样本-合同.txt').then(res => {
			_d.list = res;
			console.log(res);
		})
		// if(route.query.storage == 1) {
		// 	_d.list = localStorage.getItem('word_storage') || [];
		// } else {
		// 	console.log('111');
		// }
	})

	function uploadWord() {
		let oFrag = creatFragment(_d.list);
		hiddenBoxRef.value.innerHTML = '';
		hiddenBoxRef.value.appendChild(oFrag);
		$('.preview-hidden-box').wordExport('word文档');
	}

	function saveWord() {
		
	}

	function changeValue(data, aIndex, bIndex = -1) {
		if(bIndex == -1) {
			_d.list[aIndex].attr.text = data;
		} else {
			_d.list[aIndex].children[bIndex].attr.text = data;
		}
	}

	function changeTableData(data, aIndex) {
		_d.list[aIndex] = data;
	}
</script>

<style lang="scss" scoped>
.word-preview-wp {
	.word-group {
		position: relative;
		margin: 0 auto;
		padding: 20px 20px 50px;
		width: 624px;
		background: #fff;
		.word-content {
			width: 100%;
			min-height: 700px;
		}

		.sub-box {
			position: absolute;
			z-index: 2;
			left: 0;
			right: 0;
			bottom: 10px;
			text-align: center;
		}
	}
}
.preview-hidden-box {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
}
</style>